<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 langtag="page-clientlist"></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                {{if eq true .isAdmin}}
                <div class="content">
                    <div class="table-responsive">
                        <div id="toolbar">
                            <div class="d-flex w-100">
                                <a class="btn btn-primary dim mr-2" href="{{.web_base_url}}/client/add">
                                    <i class="fa fa-fw fa-lg fa-plus"></i>
                                    <span langtag="word-add"></span></a>
                                <a class="btn btn-danger dim" onclick="submitform('clear', '{{.web_base_url}}/client/clear', {'id': 0, 'mode': 'flow'})">
                                    <i class="fa fa-fw fa-lg fa-eraser"></i>
                                    <span langtag="word-clearflow"></span></a>
                            </div>
                        </div>
                        <table class="table-striped table-hover" data-mobile-responsive="true" id="taskList_table"></table>
                    </div>
                </div>
                {{end}}
                <div class="ibox-content">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true" data-backdrop="false" data-keyboard="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="qrModalLabel">TOTP</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img id="qrImg" src="" alt="QR" style="max-width: 100%; height: auto;" />
            </div>
        </div>
    </div>
</div>

<script>
    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: "{{.web_base_url}}/client/list", // 服务器数据的加载地址
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        search: true,
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true,//分页
        sidePagination: 'server',//服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50, 100, 'all'],
        cookie: true,
        cookieIdTable: 'client',
        cookieStorage: 'localStorage',
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            tmp = '<b langtag="word-maxconnections"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'conn_limit\'})">' + row.MaxConn + '</span>'
                {{else}}
                + row.MaxConn
                {{end}}
                + '&emsp;'
                + '<b langtag="word-curconnections"></b>: ' + row.NowConn + '&emsp;'
                + '<b langtag="word-flowlimit"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + row.Flow.FlowLimit + '</span>'
                {{else}}
                + row.Flow.FlowLimit
                {{end}}
                + 'MB&emsp;'
                + '<b langtag="word-timelimit"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + row.Flow.TimeLimit + '</span>'
                {{else}}
                + row.Flow.TimeLimit
                {{end}}
                + '&emsp;'
                + '<b langtag="word-ratelimit"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'rate_limit\'})">' + row.RateLimit + '</span>'
                {{else}}
                + row.RateLimit
                {{end}}
                + 'KB/s&emsp;'
                + '<b langtag="word-maxtunnels"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'tunnel_limit\'})">' + row.MaxTunnelNum + '</span>'
                {{else}}
                + row.MaxTunnelNum
                {{end}}
                + '&emsp;<br/><br/>'
                + '<b langtag="word-createtime"></b>: ' + row.CreateTime + '&emsp;'
                + '<b langtag="word-lastonlinetime"></b>: ' + row.LastOnlineTime + '&emsp;'
                + '<b langtag="word-address"></b>: <span onclick="oCopy(this)">' + row.Addr + '</span>&emsp;'
                + '<b langtag="word-localaddress"></b>: <span onclick="oCopy(this)">' + row.LocalAddr + '</span>&emsp;<br/><br/>'
            if (row.WebUserName || row.WebPassword) {
                tmp += '<b langtag="word-webusername"></b>: ' + row.WebUserName + '&emsp;'
                + '<b langtag="word-webpassword"></b>: ' + row.WebPassword + '&emsp;'
            }
            if (row.WebUserName && row.WebTotpSecret) {
                tmp += '<b langtag="word-webtotpsecret"></b>: <span class="btn btn-primary btn-sm" data-url="{{.web_base_url}}/client/qr?account=' + row.WebUserName + '&secret=' + row.WebTotpSecret + '" style="cursor: pointer;" onclick="showQr(this)">' + row.WebTotpSecret + '</span>&emsp;'
            }
            if (row.Cnf.U || row.Cnf.P) {
                tmp += '<b langtag="word-basicusername"></b>: ' + row.Cnf.U + '&emsp;'
                + '<b langtag="word-basicpassword"></b>: ' + row.Cnf.P + '&emsp;<br/><br/>'
            }
            tmp += '<b langtag="word-crypt"></b>: <span langtag="word-' + row.Cnf.Crypt + '"></span>&emsp;'
                + '<b langtag="word-compress"></b>: <span langtag="word-' + row.Cnf.Compress + '"></span>&emsp;'
                + '<b langtag="word-connectbyconfig"></b>: <span langtag="word-' + row.ConfigConnAllow + '"></span>&emsp;<br/><br/>'
                + '<b langtag="word-blackip"></b>: ' + row.BlackIpList + '&emsp;<br/><br/>'
                {{if index . "tcp_p"}}
                + '<b langtag="word-commandclient-tcp"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ip}}:{{.tcp_p}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"tcp\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "kcp_p"}}
                + '<b langtag="word-commandclient-kcp"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ip}}:{{.kcp_p}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"kcp\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "tls_p"}}
                + '<b langtag="word-commandclient-tls"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ip}}:{{.tls_p}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"tls\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "quic_p"}}
                + '<b langtag="word-commandclient-quic"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ip}}:{{.quic_p}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"quic\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "ws_p"}}
                + '<b langtag="word-commandclient-ws"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ip}}:{{.ws_p}}{{.ws_path}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"ws\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "wss_p"}}
                + '<b langtag="word-commandclient-wss"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ip}}:{{.wss_p}}{{.ws_path}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"wss\"</code>&emsp;<br/><br/>"
                {{end}}
            return tmp
        },
        //表格的列
        columns: [
            {
                field: 'Id',//域值
                title: '<span langtag="word-id"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Remark',//域值
                title: '<span langtag="word-remark"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Version',//域值
                title: '<span langtag="word-version"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + escapeHtml(value) + '</span>'
                }
            },
            {
                field: 'Mode',//域值
                title: '<span langtag="word-scheme"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + getBridgeMode(value) + '</span>'
                }
            },
            {
                field: 'VerifyKey',//域值
                title: '<span langtag="word-verifykey"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (!row.NoStore) {
                        return '<span onclick="oCopy(this)">' + value + '</span>'
                    } else {
                        return '<span langtag="word-publicvkey"></span>'
                    }
                }
            },
            {
                field: 'Addr',//域值
                title: '<span langtag="word-address"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'LocalAddr',//域值
                title: '<span langtag="word-localaddress"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'InletFlow',//域值
                title: '<span langtag="word-inletflow"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.InletFlow)
                    {{end}}
                }
            },
            {
                field: 'ExportFlow',//域值
                title: '<span langtag="word-exportflow"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.ExportFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.ExportFlow)
                    {{end}}
                }
            },
            {
                field: 'TotalFlow',//域值
                title: '<span langtag="word-totalflow"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow + row.Flow.ExportFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.InletFlow + row.Flow.ExportFlow)
                    {{end}}
                }
            },
            {
                field: 'FlowRemain',//域值
                title: '<span langtag="word-flowremain"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (row.Flow.FlowLimit === 0) {
                        return '∞'
                    }
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + changeunit(row.Flow.FlowLimit*1024*1024 - row.Flow.InletFlow - row.Flow.ExportFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.FlowLimit*1024*1024 - row.Flow.InletFlow - row.Flow.ExportFlow)
                    {{end}}
                }
            },
            {
                field: 'TimeRemain',//域值
                title: '<span langtag="word-timeremain"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + getRemainingTime(row.Flow.TimeLimit).formatted + '</span>'
                    {{else}}
                    return getRemainingTime(row.Flow.TimeLimit).formatted
                    {{end}}
                }
            },
            {
                field: 'Flow.FlowLimit',//域值
                title: '<span langtag="word-flowlimit"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value === 0) {
                        return '<span langtag="word-false"></span>'
                    }
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + changeunit(value * 1024 * 1024) + '</span>'
                    {{else}}
                    return changeunit(value * 1024 * 1024)
                    {{end}}
                }
            },
            {
                field: 'Flow.TimeLimit',//域值
                title: '<span langtag="word-timelimit"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value === "0001-01-01T00:00:00Z") {
                        return '<span langtag="word-false"></span>'
                    }
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + value + '</span>'
                    {{else}}
                    return value
                    {{end}}
                }
            },
            {
                field: 'NowConn',//域值
                title: '<span langtag="word-nowconn"></span>',//内容
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Rate.NowRate',//域值
                title: '<span langtag="word-speed"></span>',//内容
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return changeunit(value) + "/s"
                }
            },
            {
                field: 'Status',//域值
                title: '<span langtag="word-status"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-open"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-close"></span>'
                    }
                }
            },
            {
                field: 'IsConnect',//域值
                title: '<span langtag="word-connect"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-online"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-offline"></span>'
                    }
                }
            },
            {
                field: 'option',//域值
                title: '<span langtag="word-option"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'

                    {{if eq true .isAdmin}}
                    if (row.Status) {
                        btn_group += '<a onclick="submitform(\'stop\', \'{{.web_base_url}}/client/changestatus\', {\'id\':' + row.Id
                        btn_group += ', \'status\': 0})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += '<a onclick="submitform(\'start\', \'{{.web_base_url}}/client/changestatus\', {\'id\':' + row.Id
                        btn_group += ', \'status\': 1})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    {{if eq true .allow_local_proxy}}
                    if (row.Id > 0) {
                        btn_group += '<a onclick="submitform(\'delete\', \'{{.web_base_url}}/client/del\', {\'id\':' + row.Id
                        btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    }
                    {{else}}
                    btn_group += '<a onclick="submitform(\'delete\', \'{{.web_base_url}}/client/del\', {\'id\':' + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    {{end}}
                    {{end}}

                    btn_group += '<a href="{{.web_base_url}}/client/edit?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a></div>'
                    return btn_group
                }
            },
            {
                field: 'show',//域值
                title: '<span langtag="word-show">',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return '<div class="btn-group"><a href="{{.web_base_url}}/index/all?client_id=' + row.Id
                        + '" class="btn btn-outline btn-primary" langtag="word-tunnel"></a>'
                        + '<a href="{{.web_base_url}}/index/hostlist?client_id=' + row.Id
                        + '" class="btn btn-outline btn-success" langtag="word-host"></a></div>'
                }
            }
        ]
    });

    function showQr(el) {
        var url = el.getAttribute('data-url');
        document.getElementById('qrImg').src = url;
        $('#qrModal').modal('show');
    }
</script>
